import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
    selector: 'app-query-box',
    template: `
    <div class="query-box-container">
      <div class="query-box-item">
        <label>{{ industryLabel }}</label>
        <select [formControl]="selectedIndustry" class="rounded-select">
          <option *ngFor="let option of industryOptions" [value]="option.value">{{ option.label }}</option>
        </select>
      </div>
      <div class="query-box-item">
        <label>{{ countryLabel }}</label>
        <select [formControl]="selectedCountry" class="rounded-select">
          <option *ngFor="let option of countryOptions" [value]="option.value">{{ option.label }}</option>
        </select>
      </div>
      <button class="query-button" (click)="onQuery()">查询</button>
    </div>
  `,
    standalone: true,
    imports: [CommonModule, ReactiveFormsModule],
    styles: [
        `
      .query-box-container {
        display: flex;
        align-items: center;
        gap: 20px; /* 元素之间的间隔 */
        margin-top: 20px;
      }

      .query-box-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }

      .rounded-select {
        width: 250px;
        padding: 10px;
        border-radius: 25px; /* 设置圆角 */
        border: 1px solid #ccc;
        font-size: 16px;
        outline: none;
      }

      .rounded-select:focus {
        border-color: #007bff;
      }

      .query-button {
        padding: 10px 20px;
        border-radius: 25px; /* 圆角 */
        background-color: #007bff;
        color: white;
        border: none;
        cursor: pointer;
        font-size: 16px;
        transition: background-color 0.3s ease;
      }

      .query-button:hover {
        background-color: #0056b3;
      }
    `,
    ],
})
export class QueryBoxComponent {
    @Input() industryLabel = 'Select Industry :';
    @Input() countryLabel = 'Select Country:';
    @Input() industryOptions: { label: string, value: string }[] = [
      { label: 'Construction industry', value: '48' },
      { label: 'Education industry', value: '48' },
      { label: 'Software industry', value: '48' },
    ];
    @Input() countryOptions: { label: string, value: string }[] = [
      { label: 'Kuwait', value: 'kw' },
      { label: 'United States', value: 'us' },
      { label: 'China', value: 'cn' },
    ];

    selectedIndustry = new FormControl('');
    selectedCountry = new FormControl('');

    @Output() querySubmitted: EventEmitter<{
        industry: string;
        country: string;
    }> = new EventEmitter<{ industry: string; country: string }>();

    onQuery() {
        this.querySubmitted.emit({
            industry: this.selectedIndustry.value || '',
            country: this.selectedCountry.value || '',
        });
    }
}
